<template>
  <div>
    <el-dialog :title="title" v-model="dialogVisible" :before-close="closeDialog" v-on:open="loadData"
               :close-on-click-modal="false">
      <el-form :model="form" :rules="rules" :inline="true" ref="form" label-width="100px" class="demo-form">
        <el-form-item label="中心名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <!--<el-form-item label="编号" prop="num" style="margin-bottom: 12px;">-->
          <!--<el-input v-model="form.num"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="简称" prop="shortName" style="margin-bottom: 12px;">
          <el-input v-model="form.shortName"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="respo" style="margin-bottom: 12px;">
          <el-input v-model="form.respo"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <el-form-item label="地区" prop="" style="margin-bottom: 12px;">
              <v-distpicker :province="basicSelect.province" :city="basicSelect.city" :area="basicSelect.area"
                            @selected="selected"></v-distpicker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="地址" prop="address" style="width: 100%;margin-bottom: 12px;">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="邮编" prop="zipCode" style="margin-bottom: 12px;">
          <el-input v-model="form.zipCode"></el-input>
        </el-form-item>
        <el-form-item label="email" style="margin-bottom: 12px;">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="传真" prop="fax" style="margin-bottom: 12px;">
          <el-input v-model="form.fax"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="telephone" style="margin-bottom: 12px;">
          <el-input v-model="form.telephone"></el-input>
        </el-form-item>
        <el-form-item label="描述" style="width: 100%;">
          <el-input type="textarea" v-model="form.remark" style="width: 262%"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status" style="width: 100%;margin-bottom: 5px;">
          <el-radio class="radio" v-model="form.status" :label="1">正常</el-radio>
          <el-radio class="radio" v-model="form.status" :label="0">停用</el-radio>
        </el-form-item>
        <el-row>
          <el-col :span="24" style="padding:10px;">
            <span style="color:red;float:left;">"*"为必填项。</span>
            <div class="pull-right">
              <el-button v-if="$utils.ckUIPower('S01010101')" type="primary" @click.native.prevent="handleSubmit">
                {{addBtnTxt}}
              </el-button>
              <el-button v-if="$utils.ckUIPower('S01010101')" @click.native.prevent="handleReset">重置</el-button>
              <el-button @click.native.prevent="closeDialog">取消</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import http from '../../../api/http'
  import VDistpicker from '../../../components/v-distpicker'

  var model = {
    name: '',
    shortName: '',
    address: "",
//    num: '',//编号
    remark: '',//备注
    peopleAmount: '',
    respo: '',
    telephone: '',
    email: '',
    status: 1,
    remark: '',
    zipCode: '',//邮编
    fax: ''
  };
  export default {
    data() {
      return {
        title: '中心添加', form: Object.assign({}, model),
        rules: {
          shortName: [
            {required: true, message: '请输入名称'},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符'}
          ],
          num: [
            {required: true, message: '请输入编号'},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符'}
          ],
          name: [
            {required: true, message: '请输入全称'},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符'}
          ]
        },
        basicSelect: {province: '', city: '', area: ''},
        roleList: [],
        addBtnTxt: ''
      }
    },
    props: {
      dialogFormVisible: {
        type: Boolean,
        default: false
      }, id: {
        type: String
      }
    },
    computed: {
      dialogVisible: {
        get: function () {
          return this.dialogFormVisible
        },
        set: function () {

        }
      }
    },
    components: {VDistpicker,},
    methods: {
      selected(val) {
        if (val.province.code != undefined && val.province.code != '')
          this.form.province = val.province.value;
        if (val.city.code != undefined && val.city.code != '')
          this.form.city = val.city.value;
        if (val.area.code != undefined && val.area.code != '')
          this.form.county = val.area.value;
      },
      handleReset() {
        this.$refs.form.resetFields()
      },
      handleSubmit() {
        var vm = this;

        this.$refs.form.validate(function (valid) {
          if (valid) {
            http.postData(vm, "/pt/site/save", {json: JSON.stringify(vm.form)}, function (resp) {
              var ret = resp.body;
              if (ret.code === '111') {
                vm.$notify({title: '操作提示', message: ret.msg, type: 'success'});
                vm.form = Object.assign({}, model);
                vm.closeDialog();
                vm.$parent.onSubmit();
              } else {
                vm.$notify.error({title: '操作失败', message: ret.msg});
              }
            });
          } else {
            return false
          }
        })
      },
      closeDialog() {
        this.$emit('closeDialog');
        this.form = Object.assign({}, model);
        this.basicSelect = {province: '', city: '', area: ''};
      }, loadData() {
        var vm = this;
        this.basicSelect = {province: '', city: '', area: ''};
        if (this.id != undefined && this.id != '') {
          http.postData(vm, "/pt/site/detail/" + this.id, {}, function (resp) {
            var ret = resp.body;
            if (ret.code === '111') {
              vm.form = ret.value;
              vm.basicSelect.province=vm.form.province;
              vm.basicSelect.city=vm.form.city;
              vm.basicSelect.area=vm.form.county;
            } else {
              vm.$notify.error({title: '操作失败', message: ret.msg});
            }
          });
        }
        if (vm.id == undefined || vm.id == '') {
          vm.addBtnTxt = '立即创建';
          vm.title = '中心创建';
        } else {
          vm.addBtnTxt = '保存修改';
          vm.title = "中心修改"
        }
      }
    }, created() {
      var vm = this;
      http.postData(vm, "/sys/role/list", {}, function (resp) {
        vm.roleList = resp.body.value;
      });
    }
  }
</script>
